<template>
  <gui-page ref="pageRef" class="gui-bg-white" :custom-header="true" :full-page="true" :is-loading="pageLoading">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">批次线</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gFixedTop>
      <view class="gui-bg-white">
        <view
          class="gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-nowrap gui-align-items-center gui-padding gui-space-around"
          style="height: 88rpx"
        >
          <gui-select-menu
            ref="selectRef1"
            class-name="gui-bg-gray gui-border-radius-full select-title"
            :is-h5header="false"
            :items="selectMenu1"
            @select="select1"
          />
          <gui-select-menu
            ref="selectRef2"
            class-name="gui-bg-gray gui-border-radius-full select-title"
            :is-h5header="false"
            :items="selectMenu2"
            :select-index="selectIndex2"
            @select="select2"
          />
        </view>
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column gui-padding" style="margin-top: 60rpx">
        <!-- 主体区域 -->
        <!--    等位分对照表      -->
        <view class="gui-flex1">
          <!--          <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">-->
          <!--            <text class="gui-card-name gui-text-small gui-bold">等位分对照表</text>-->
          <!--            <text class="gui-icons gui-color-gray" @tap.stop="openHelpModel">&#xe628;</text>-->
          <!--          </view>-->
          <view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top">
            <view class="gui-flex gui-rows gui-nowrap gui-border-l gui-border-t gui-bg-orange3 gui-color-white gui-dark-bg-level-2">
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">批次</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">分数</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">位次</text>
            </view>
            <view
              v-for="(item, index) in students"
              :key="index"
              class="gui-flex gui-rows gui-nowrap gui-border-l"
              :class="{ 'gui-bg-orange5': index % 2 === 1 }"
            >
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[0] }}</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[1] }}</text>
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[2] }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--  弹窗    -->
      <gui-popup ref="helpModelRef" :z-index="9999">
        <view class="gui-relative gui-box-shadow gui-img-in gui-bg-white gui-padding gui-border-radius">
          <view style="margin-top: 60rpx">
            <text class="gui-text-small">01、02、03代 表的意思分别是 国家重点学科、 省重点学科、不 是重点学科。</text>
          </view>
          <!-- 关闭按钮 -->
          <text class="gui-block modal-close gui-icons gui-absolute-rt" @tap.stop="closeHelpModel">&#xe78a;</text>
        </view>
      </gui-popup>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const pageLoading = ref<boolean>(false)
// 搜索
const students = ref<Array<any>>([
  ['本科批', '407', '3'],
  ['专科批', '230', '200'],
])

const helpModelRef = ref<any>(null)
const selectRef1 = ref<any>(null)
const selectRef2 = ref<any>(null)

const selectMenu1 = ref<Array<any>>(['位置', '精选优品', '价格较低', '只买贵的', '其他方式'])
const selectMenu2 = ref<Array<any>>(['专业', '大专', '本科', '硕士', '博士'])

const selectIndex2 = ref<number>(0)

const reset = () => {
  selectRef1.value.setCurrentIndex(0)
  selectRef2.value.setCurrentIndex(0)
}
const select1 = (index: number, val: any) => {
  console.log(`选择了 ${val}`)
}
const select2 = (index: number, val: any) => {
  console.log(`选择了 ${val}`)
}

// 弹窗
const closeHelpModel = () => {
  helpModelRef.value.close()
}

const getServerData = () => {
  //模拟从服务器获取数据时的延时
}

onLoad((option) => {
  // console.log(JSON.parse(option.data))
  getServerData()
})
</script>
<style scoped>
/deep/ .graceSelectMenuItem {
  width: 160rpx;
  flex: 1;
}
/deep/ .gui-select-menu-title {
  height: 66rpx !important;
}
/deep/ .gui-select-menus {
  margin-top: 75rpx !important;
  border-top: 1px solid #f2f2f2;
}

/deep/ .select-title {
  width: 200rpx !important;
}

.modal-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
.gui-td {
  flex: 1;
  overflow: hidden;
  padding: 10rpx;
}
.gui-primary-text {
  line-height: 60rpx !important;
  font-size: 24rpx;
}
</style>
